<template>
	<view class="container">
		<view class="user-section">
			<image class="bg" src="/static/index_top_bg.png"></image>
			<view class="user-info-box">
				<view class="member-top-c">
					<template>
						<view style="padding-top: 20rpx;">
							<image class='portrait' mode="aspectFill" :src='userDetailInfo.icon'></image>
						</view>
						<view class='user-name'
							style="text-align: center;font-size: 30rpx;display:flex;align-items: center;margin-left: 30rpx;">
							<!-- {{ userDetailInfo.nickname }} -->
							<text v-if="hasLogin"
								style="font-size: 36rpx;font-family: Source Han Sans CN;font-weight: 500;color: #FFFFFF">{{userDetailInfo.phone}}</text>
							<text v-if="!hasLogin" @click="toLogin()"
								style="font-size: 36rpx;font-family: Source Han Sans CN;font-weight: 500;color: #FFFFFF">点击登录</text>
						</view>
					</template>
					<!-- <template v-else>
						<view class="portrait">
							<image :src="userDetailInfo.icon" mode="aspectFill"></image>
						</view>
						<view>
							<button class="login-btn" @click="toLogin()">授权登录</button>
						</view>
					</template> -->
				</view>
			</view>
		</view>
		<!-- 订单分类 -->
		<view class="orders">
			<view v-for="(item, index) in functions" :key="index" class="orderbutton" @click="goto(item.val)">
				<view class="orderitem">
					<image :src="item.icon"></image>
					<view class="functionDesc"><text>{{item.name}}</text></view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="navbutton">
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				@click="navTo('/pages/money/integral')">
				<view class="iconfont icon-recharge" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>会员充值</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view class="cell" @click="switchTo('/pages/order/coachOrder')">
				<view class="iconfont icon-coin" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>我的订单</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view style="height: 10rpx;"></view>
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				@click="navTo('/pages/meituan/hexiaodetail')">
				<view class="iconfont icon-meituan" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>美团核销记录</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view class="cell" @click="navTo('/pages/douyin/hexiaodetail')">
				<view class="iconfont icon-douyin" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>抖音核销记录</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view style="height: 10rpx;"></view>
			<view class="cell"
				style="border-bottom-style: solid;border-bottom-color: #E8E8E8;border-bottom-width: 1rpx;"
				@click="navTo('/pages/user/mycertificate')">
				<view class="iconfont icon-wallet" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt"><text>我的券</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
			<view class="cell" @click="toLogout()">
				<view class="iconfont icon-set" style="color: #555555;font-size: 32rpx;"></view>
				<view class="celltxt" style=""><text>退出登录</text></view>
				<view class="iconfont icon-more" style="color: #9A9A9A;margin-left: 440rpx;"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import Api from '@/common/api';
	import listCell from '@/components/mix-list-cell';
	import '@/static/icon/iconfont.css';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			listCell
		},
		data() {
			return {
				userDetailInfo: {},
				currentCoachId: null,
				role: '0', //0:学员 1:教练
				functions: [{
						name: '全部订单',
						icon: '/static/mine/icon_order_1.png',
						val: 0
					},
					{
						name: '待付款',
						icon: '/static/mine/icon_order_2.png',
						val: 1
					},
					{
						name: '已付款',
						icon: '/static/mine/icon_order_3.png',
						val: 2
					},
					{
						name: '已完成',
						icon: '/static/mine/icon_order_4.png',
						val: 3
					},
					{
						name: '已取消',
						icon: '/static/mine/icon_order_5.png',
						val: 4
					}
				]
			};
		},
		async onShow() {
			console.log("onshow========" + this.hasLogin);
			if (this.hasLogin) {
				let params = {
					memberId: this.userInfo.userInfo.id
				};
				let data1 = await Api.apiCall('get', Api.index.userInfo, params);
				this.userDetailInfo = data1.member;
				console.log(this.userDetailInfo);
				this.currentCoachId = this.userInfo.userInfo.coachId;
			}
		},
		async onLoad() {
			console.log("onLoad========" + this.hasLogin);
			if (this.hasLogin) {
				console.log(this.userInfo.userInfo);
				let username = this.userInfo.userInfo.username;
				console.log('用户名' + username);
				let params = {
					memberId: this.userInfo.userInfo.id
				};
				let data1 = await Api.apiCall('get', Api.index.userInfo, params);
				console.log(data1);
				this.userDetailInfo = data1.member;
				this.currentCoachId = this.userInfo.userInfo.coachId;
				let coachId = this.userInfo.userInfo.coachId;
				if (coachId > 0) {
					this.role = 1;
				}
				console.log(this.role)
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			...mapMutations(['logout']),
			toBuyVip() {
				uni.navigateTo({
					url: '/pages/user/vip/buyvip?pushId=0'
				});
			},
			toLogout() {
				uni.showModal({
					content: '确定要退出登录吗',
					success: e => {
						if (e.confirm) {
							this.logout();
						}
					}
				});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url: url
				});
			},
			switchTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.switchTab({
					url: url
				});
			},
			rediTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.redirectTo({
					url: url
				});
			},
			toLogin() {
				uni.redirectTo({
					url: '/pages/public/login'
				});
			},
			goto(tabCurrentIndex) {
				uni.switchTab({
					url: '/pages/order/coachOrder'
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.user-remainder {
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 1.8;
	}

	.member-top-c {
		margin-left: 5rpx;
		margin-top: 140rpx;
		display: flex;
	}

	.user-name {
		line-height: 1;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 440rpx;
		position: relative;
		box-sizing: border-box;
		padding: 55upx 30upx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.retailtit {
		width: 100%;
		height: 60upx;
		line-height: 40upx;
		font-size: 32upx;
		font-weight: bold;
		color: #333;
	}

	.retaillist {
		display: flex;
		width: 100%;
		border-bottom: 1upx solid #f6f6f6;
		text-align: center;
		padding-bottom: 20upx;
		margin-bottom: 20upx;
	}

	.retaillist:last-child {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}

	.retaileach {
		flex: 1;
	}

	.retailtxt {
		font-size: 26upx;
		color: #949494;
		line-height: 50upx;
	}

	.retailname {
		font-size: 36upx;
		color: #e61a0f;
		font-weight: bold;
	}

	.retailtitle {
		font-size: 30upx;
		color: #333;
	}

	.user-info-box {
		height: 190upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		margin: 0 auto;

		.portrait {
			width: 140upx;
			height: 140upx;
			border: 1upx solid #fff;
			border-radius: 50%;
			margin: 0 auto 20upx;
			display: block;

			image {
				width: 130upx;
				height: 130upx;
				border-radius: 50%;
			}
		}

		.username {
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
	}

	.login-btn {
		color: #333;
		width: 180upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		background: #ffffff;
		font-size: 12px;
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $font-base + 2upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		padding: 30upx 30upx;
		position: relative;
		background: #f5f5f5;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #e61a0f;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}

	.celltxt {
		width: 180rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		margin-left: 22rpx;
		letter-spacing: 1rpx;
	}

	.contact-content {
		background: #f5f5f5;
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.orders {
		width: 686rpx;
		height: 168rpx;
		background-color: #ffffff;
		position: relative;
		top: -130rpx;
		left: 32rpx;
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.orderitem {
		flex: 1;
		height: 50rpx;
		text-align: center;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.functionDesc {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		flex: 1;
	}

	.orderbutton {
		display: flex;
		flex-direction: column;
		height: 100rpx;
		flex: 1;
	}

	.navbutton {
		height: 500rpx;
		width: 100%;
		margin-top: 10rpx;
		position: relative;
		top: -80rpx;
	}

	.cell {
		height: 96rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
	}
</style>